<template>
  <div class="editor-wrapper">
    <div class="toolbar">
      <div class="toolbar-group">
        <button
          :disabled="!canUndo"
          class="toolbar-button"
          title="撤销 (Ctrl+Z)"
          @click="handleUndo"
        >
          <i class="icon-undo" />
          <span>撤销</span>
        </button>
        <button
          :disabled="!canRedo"
          class="toolbar-button"
          title="重做 (Ctrl+Y)"
          @click="handleRedo"
        >
          <i class="icon-redo" />
          <span>重做</span>
        </button>
      </div>
      <div class="toolbar-group">
        <button
          class="toolbar-button lock-button"
          title="锁定选中内容"
          @click="editorAdapter.lockSelection"
        >
          <i class="icon-lock" />
          <span>锁定</span>
        </button>
      </div>
      <div class="toolbar-group">
        <button
          :class="{ active: editorAdapter.isFormatActive('bold') }"
          class="toolbar-button"
          title="加粗 (Ctrl+B)"
          @click="editorAdapter.execFormatCommand('bold')"
        >
          <i class="icon-bold" />
          <span>加粗</span>
        </button>
        <button
          :class="{ active: editorAdapter.isFormatActive('italic') }"
          class="toolbar-button"
          title="斜体 (Ctrl+I)"
          @click="editorAdapter.execFormatCommand('italic')"
        >
          <i class="icon-italic" />
          <span>斜体</span>
        </button>
      </div>
    </div>

    <div class="editor-container">
      <div ref="editor" class="editor" contenteditable />
      <div class="preview" v-html="content" />
    </div>
  </div>
</template>

<script>
import { EditorCore } from './EditorCore'

export default {
  data() {
    return {
      content: '',
      editorCore: null,
      canUndo: false,
      canRedo: false,
      editorAdapter: {
        getContent: () => this.content,
        setContent: (content) => { this.content = content },
        undo: this.handleUndo,
        redo: this.handleRedo,
        lockSelection: () => this.editorCore?.lockSelection(),
        execFormatCommand: (name, ...args) =>
          this.editorCore?.execFormatCommand(name, ...args),
        isFormatActive: (name) =>
          this.editorCore?.queryFormatState(name) || false
      }
    }
  },
  mounted() {
    this.editorCore = new EditorCore(this.$refs.editor)
    this.content = this.editorCore.getContent()

    // 初始化按钮状态
    this.updateButtonStates()

    // 设置内容变化监听
    this.editorCore.editorElement.addEventListener('input', () => {
      this.content = this.editorCore.getContent()
      this.updateButtonStates()
    })
  },
  methods: {
    handleUndo() {
      const result = this.editorCore.undo()
      this.content = this.editorCore.getContent()
      this.canUndo = result.canUndo
      this.canRedo = result.canRedo
    },
    handleRedo() {
      const result = this.editorCore.redo()
      this.content = this.editorCore.getContent()
      this.canUndo = result.canUndo
      this.canRedo = result.canRedo
    },
    handleLock() {
      const result = this.editorCore.lockSelection()
      this.content = this.editorCore.getContent()
      this.canUndo = result.canUndo
      this.canRedo = result.canRedo
    },
    handleFormat(name) {
      const result = this.editorCore.execFormatCommand(name)
      this.content = this.editorCore.getContent()
      this.canUndo = result.canUndo
      this.canRedo = result.canRedo
    },
    updateButtonStates() {
      this.canUndo = this.editorCore.historyManager.canUndo
      this.canRedo = this.editorCore.historyManager.canRedo
    }
  }
}
</script>

<style>
/* 原有样式保持不变 */
.icon-bold {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23333' d='M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z'/%3e%3c/svg%3e");
}
.icon-italic {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23333' d='M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z'/%3e%3c/svg%3e");
}
.toolbar-button.active {
  background-color: #e6f7ff;
  border-color: #91d5ff;
}
</style>

<style>
.editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.toolbar {
  display: flex;
  gap: 15px;
  padding: 8px;
  background: #f8f8f8;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}
.toolbar-group {
  display: flex;
  gap: 5px;
  padding-right: 15px;
  border-right: 1px solid #e0e0e0;
}
.toolbar-group:last-child {
  border-right: none;
}
.toolbar-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.toolbar-button:hover {
  background: #f0f0f0;
}
.toolbar-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.toolbar-button i {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
}
.icon-undo {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23333' d='M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z'/%3e%3c/svg%3e");
}
.icon-redo {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23333' d='M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z'/%3e%3c/svg%3e");
}
.icon-lock {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='%23333' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3e%3c/svg%3e");
}
.lock-button {
  background-color: #f0f7ff;
  border-color: #cce0ff;
}
.locked {
  background: #f0f7ff;
  padding: 2px 4px;
  border-radius: 4px;
  border: 1px solid #cce0ff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.editor-container {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}
.editor, .preview {
  flex: 1;
  min-height: 200px;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}
</style>
